<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option"/>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import ContentTypeEnum from '@/feature/cms/infra/constants/ContentTypeEnum'
import {articleApi} from '@/feature/cms/infra/api/articleApi'
import CURDTable from '@/framework/components/table/CURDTable'
import {articleTypeApi} from "@/feature/cms/infra/api/articleTypeApi";
import OnlineStatusEnum from "@/framework/constant/OnlineStatusEnum";

export default {
  components: {CURDTable},
  data() {
    return {
      option: {
        requestApi: articleApi,
        showSelection: true,
        dialogWidth: '1200px',
        loadDetail: true,
        columns: [
          {
            label: '内容类型',
            width: 80,
            prop: 'contentType',
            required: true,
            type: ColumnType.RADIO,
            options: ContentTypeEnum
          },
          {
            label: '标题',
            searchable: true,
            width: 'auto',
            required: true,
            prop: 'title',
            span: 24
          },
          {
            label: '封面',
            span: 24,
            width: 80,
            required: true,
            prop: 'cover',
            type: ColumnType.IMAGE
          },
          {
            label: '类型',
            prop: 'typeId',
            required: true,
            width: 80,
            searchable: true,
            type: ColumnType.SELECT,
            options: articleTypeApi.listAll()
          },
          {
            label: '排序',
            prop: 'sortNum',
            width: 60,
            required: true,
            type: ColumnType.NUMBER,
            defaultValue: 0
          },
          {
            label: '状态',
            span: 24,
            width: 60,
            searchable: true,
            type: ColumnType.RADIO,
            hiddenInForm: true,
            options: OnlineStatusEnum,
            prop: 'status'
          },
          {
            label: '按钮内容',
            hiddenInTable: true,
            required: false,
            width: 120,
            prop: 'buttonText',
            type: ColumnType.TEXT
          }, {
            label: '按钮链接',
            viewAsLink: true,
            hiddenInTable: false,
            required: false,
            width: 160,
            prop: 'buttonLink',
            type: ColumnType.LINK
          },
          {
            label: '视频链接',
            required: true,
            prop: 'videoUrl',
            span: 24,
            type: ColumnType.VIDEO_FORMAT,
            showFilter: ({value}) =>[ContentTypeEnum.enum_1.id, ContentTypeEnum.enum_2.id].includes(value.contentType)
          }, {
            label: '内容',
            required: true,
            hiddenInTable: true,
            prop: 'content',
            span: 24,
            type: ColumnType.RICH_EDITOR,
            showFilter: ({value}) => value.contentType === ContentTypeEnum.enum_0.id
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

